<template>
    <el-dialog
        :model-value="dialogVisible"
        :title="type == 'one' ? (pageType=='add'?'新增':'编辑'+'一级分类') : (pageType=='add'?'新增':'编辑'+'二级分类')"
        width="500px"
        :before-close="handleClose"
        append-to-body
    >
        <el-form ref="formRef" :model="dataForm" label-width="100px" :rules="rules" :inline="false">
            <el-form-item label="分类名称" prop="areaName">
                <el-input v-model="dataForm.areaName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="分类编码" prop="areaCode">
                <el-input v-model="dataForm.areaCode" placeholder="请输入" type="number" />
            </el-form-item>
            <el-form-item label="城市英文" prop="areaEnName">
                <el-input v-model="dataForm.areaEnName" placeholder="请输入" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import api from "@/api/index";
import { ElMessage, ElMessageBox } from 'element-plus'
import delIcon from '@/assets/images/del.png'
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    type: {
        default: 'one',
        type: String

    },
    pageType: {
        default: 'add',
        type: String

    },
    activeName: {
        default: 'false',
        type: String
    },
    dataForm: {
        type: Object,
        default: () => { }
    },
    treeData: {
        type: Array,
        default: () => []
    }

})


const date = ref([])

const areaNameValidate = (rule, value, callback) => {
    let reg = /^[a-zA-Z]{1,30}$/
        if(!reg.test(value)){
            callback(new Error('请输入26个英文字母'))
        }else{
            callback()
        }   
    
}

const rules = reactive({
    areaName: [
        {
            required: true,
            message: '请输入',
            trigger: 'blur'
        }
    ],
    areaCode: [
        {
            required: true,
            message: '请输入',
            trigger: 'blur'
        }
    ],
    areaEnName:[
           {
            required: true,
            message: '请输入',
            trigger: 'blur'
        },
         { validator: areaNameValidate, trigger: 'blur' }
    ]

})

const formRef = ref(null)

const emit = defineEmits(['on-submit', 'handleClose'])

onMounted(() => {
    if (props.pageType == 'add') {
        props.dataForm.areaName = ''
        props.dataForm.areaCode = ''
    }

});



// 关闭
const handleClose = () => {
    formRef.value.resetFields()
    formRef.value.clearValidate()
    emit('handleClose')

}

const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            const obj = {
                'add': 'cityMangerAdd',
                'edit': 'cityMangerEdit'
            }
            const { areaName, areaCode, parentAreaCode,id } = props.dataForm
            console.log(areaCode)
            let data = {
                parentAreaCode,
                areaName,
                oversea: props.activeName,
                areaCode

            }
            let isRepeat = props.treeData.findIndex(item => item.areaCode == areaCode)
            if (props.pageType == 'add' && isRepeat > -1) return ElMessage.error('该编码已存在')
            if (props.type == 'one'){
                 data['parentAreaCode'] = null
                 data['areaType'] = "province"
            }
            if (props.type == 'two'){
                 data['areaType'] = "city"
            }
            
            if (props.pageType == 'edit') data['id'] = id
            console.log(props.type)
            api.dataMaintenance[obj[props.pageType]](data).then(res => {
                emit('on-update')
                handleClose()
                ElMessage.success('操作成功')
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}


</script>
